iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
自我挑戰組

從積木開始學程式系列 第 5

[DAY>5<]雙人連線終極密碼_3(加入房間、設定終極密碼、遊戲開始)

  • 分享至 

  • xImage
  •  

首先我們今天要設計加入房間的介面以及雙方玩家設定終極密碼的介面

我們切換到Join_room Screen(也就是加入房間的介面)
將以下元件抓到手機螢幕並更改元件名稱(如果不會更改元件名稱上一篇有教學喔)
https://ithelp.ithome.com.tw/upload/images/20181020/20108017mNT51K3emg.png

下面是元件的屬性設置

  • Label4元件設定
    Text:請輸入房間號碼
    FontSize:25
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181018/201080171dQZSYVIyn.png

  • 我輸入的房號 元件設定
    Hint:請輸入房間號碼
    Text:(請留白)
    KeyboardType:numeric
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181020/201080179Jxy2RXN1F.png

  • 加入遊戲 元件設定
    Text:加入遊戲
    TextColor:自選(在這邊我選擇藍色)
    FontSize:16
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181018/201080171dQZSYVIyn.png

join_room螢幕設計完成圖
https://ithelp.ithome.com.tw/upload/images/20181020/20108017R261RQCeQQ.png


接著我們換到set_number Screen (設定終極密碼的介面)

一樣我們依照下圖設定元件
https://ithelp.ithome.com.tw/upload/images/20181020/20108017FKoVQynCiK.png

  • 填入四位數字 元件設定
    Hint:請輸入四位數字
    Text:(保持空白)
    KeyboardType:numeric
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181020/201080179Jxy2RXN1F.png

  • 訂定給對方數字 元件設定
    Text:設定對方數字
    TextColor:自選(在這邊我選擇藍色)
    FontSize:16
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181018/201080171dQZSYVIyn.png

set_number螢幕設計完成圖
https://ithelp.ithome.com.tw/upload/images/20181020/20108017TTSeyjTNkT.png


接著我們換到GameStart Screen (設定遊戲開始的介面)
https://ithelp.ithome.com.tw/upload/images/20181020/20108017YGagOiJdnC.png

  • 猜測範圍 元件設定
    Text:從範圍1-9999輸入一個號碼
    FontSize:20
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181018/201080171dQZSYVIyn.png

  • 我輸入的猜測數字 元件設定
    Hint:請輸入猜測數字
    Text:(保持空白)
    KeyboardType:numeric
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181020/201080179Jxy2RXN1F.png

  • 送出 元件設定
    Text:送出
    TextColor:自選(在這邊我選擇藍色)
    FontSize:16
    Height以及Width設定:
    https://ithelp.ithome.com.tw/upload/images/20181018/201080171dQZSYVIyn.png

GameStart螢幕設計完成圖
https://ithelp.ithome.com.tw/upload/images/20181020/20108017EfQm9KsfHO.png

再來明天就是Firebase建置囉!


上一篇
[DAY>4<]雙人連線終極密碼_2(大廳及開設房間介面設定)
下一篇
[DAY>6<]雙人連線終極密碼_4(FirebaseDatabase建置)
系列文
從積木開始學程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言